<script lang="ts">
export default {
    name: 'VisitorList'
}
</script>

<script setup lang="ts">
import useVisitorTable from '@/composables/custcare/visitor/useVisitorTable';
import useVisitor from '@/composables/custcare/visitor/useVisitor';
import SysPagination from '@/components/SysPagination/index.vue';
import Detail from './Detail.vue';
// 表格的数据获取
const { listParam, visitorTable, resetBtn, searchBtn, sizeChange, currentChange } = useVisitorTable()

const { detailBtn, detailRef } = useVisitor()

</script>
<template>
    <el-main>
        <!-- 新增按钮 -->
        <el-form :inline="true" :model="listParam" class="search">
            <el-form-item label="访客ip">
                <el-input v-model="listParam.client_ip" placeholder="请输入访客ip"></el-input>
            </el-form-item>
            <el-form-item label="城市">
                <el-input v-model="listParam.city" placeholder="请输入城市"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="listParam.status" placeholder="状态">
                    <el-option label="正常" value="1" />
                    <el-option label="停用" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" v-permission="['custcare:visitor:query']" @click="searchBtn">搜索
                </el-button>
                <el-button type="default" icon="Refresh" @click="resetBtn">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="visitorTable.list" border stripe>
            <el-table-column prop="id" width="100" label="ID" />
            <el-table-column prop="uuid" label="UUID" />
            <el-table-column prop="client_ip" label="访客ip" />
            <el-table-column prop="city" label="城市" />
            <el-table-column prop="online" width="80" label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.online == '0'" type="info">离线</el-tag>
                    <el-tag v-if="scope.row.online == '1'" type="success">在线</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" width="80" label="状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == '1'">正常</el-tag>
                    <el-tag v-if="scope.row.status == '2'" type="danger">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="status" width="150" label="是否在IP黑名单">
                <template #default="scope">
                    <el-tag v-if="scope.row.is_ip_black == 1" type="danger">是</el-tag>
                    <el-tag v-else type="success">否</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
                <template #default="scope">
                    <el-button size="small" type="primary" v-permission="['custcare:visitor:detail']" icon="View"
                        @click="detailBtn(scope.row.id)">查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <SysPagination :listParam="listParam" @sizeChange="sizeChange" @currentChange="currentChange"></SysPagination>
    </el-main>
    <!-- 详情弹框 -->
    <Detail ref="detailRef"></Detail>
</template>
<style lang="scss" scoped>
</style>